<script setup lang="ts">
import { ref } from "vue";
import { HxqCheckBox } from "vue-mobile-hxq";
import { checkDataList, apiBaseCol } from "assets/js/constant";
import checkBox from "./components/checkBox.vue";

const checked = ref([]);

const dataSource = [
  {
    name: "label",
    param: "string",
    desc: "复选框全选半选的文字",
    default: "全选",
  },
  {
    name: "v-model",
    param: "[]",
    desc: "勾选的数据，存放key值的数组",
    default: "-",
  },
  {
    name: "checkedDatas",
    param: "Array<{key:1,name:选项1}>",
    desc: "可选择的项",
  },
];
</script>
<template>
  <div class="container">
    <div class="left-box">
      <div class="public-flex-box">
        <div class="public-title-bold">介绍</div>
        <div class="public-content-text">在一组备选项中进行多选。</div>
      </div>
      <div class="public-flex-box">
        <div class="public-title-bold">引入</div>

        <pre class="public-content-code">
        <code class="language-css">
          import { HxqCheckBox } from "vue-mobile-hxq";
        </code></pre>
      </div>
      <div class="public-outside-title">代码展示</div>
      <div class="public-flex-box">
        <div class="public-title-bold">基本用法</div>
        <pre class="public-content-code">
        <code id="code-2" class="language-markup line-numbers" style="text-align: left">
        import {  ref } from "vue";
        // 已选中的数据
        const checked = ref([]);
        // 待选择项
        const checkedDatas = [
          {
            key: 1,
            name: "选项a",
          },
          {
            key: 2,
            name: "选项b",
          },
          {
            key: 3,
            name: "选项c",
          }
        ]
      </code>
	</pre>
        <pre class="public-content-code">
        <code
          id="code-2"
          class="language-markup line-numbers"
          style="text-align: left"
        >
        &lt;hxq-check-box
          :checkedDatas="checkedDatas"
          v-model='checked'
          label="复选框半选">
        &lt;/hxq-check-box>
        </code></pre>
      </div>
      <div class="public-flex-box">
        <div class="public-phone-title">基本用法</div>
        <div class="public-usage-box">
          <hxq-check-box
            v-model="checked"
            :checkedDatas="checkDataList"
            label="复选框半选"
          ></hxq-check-box>
        </div>
      </div>
      <div class="public-flex-box">
        <div class="public-title-bold">基本参数</div>
        <a-table
          :dataSource="dataSource"
          :columns="apiBaseCol"
          :pagination="false"
        />
      </div>
    </div>
    <div class="right-box">
      <checkBox></checkBox>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .left-box {
    width: calc(72% - 10px);
    height: 100%;
    overflow-y: auto;
  }
  .left-box::-webkit-scrollbar {
    width: 0;
  }
  .right-box {
    width: calc(28% - 10px);
    height: 100%;
    background-color: #fff;
    border-radius: 24px;
  }
}
:deep(.van-checkbox-group) {
  display: flex;
  justify-content: space-between;
  .van-checkbox {
    height: 48px;
    line-height: 48px;
  }
  .van-checkbox:last-child {
    border-bottom: none;
  }
}
</style>
